<template>
    <div class="MainCon">
        <div class="dplayerOut">
            <div id="dplayer" class="dplayer video-box"></div>
        </div>
    </div>
</template>

<script setup>
import DPlayer from 'dplayer';
import { ref, onMounted } from "vue"
import Hls from "hls.js";

const props = defineProps({
        MyUrl:{
            type:String,
            default:''
        }

    });


watch(() => props.MyUrl, (nv) => { 
    dplayerInit(nv) 
    }

);
var dp;
const dplayerInit=(url)=>{
    dp = new DPlayer({
        container: document.getElementById('dplayer'),
        screenshot: false,
        autoplay:false,//是否自动播放
        loop:true,  //是否自动播放(音量必须是0才起作用)
        volume:0.7, //音量(默认值0.7)
        theme: '#b7daff', //主题色 底部进度条相关颜色
        hotkey:true, //开启热键，支持快进、快退、音量控制、播放暂停
        //视频信息
        video: {
            url:url,
            // type: "customHls",
            // pic: '../../public/17.png',//视频封面
            thumbnails: 'thumbnails.jpg',////视频缩略图，可以使DPlayer-thumbna
            // customType: {
            //     customHls: function (video, player) {
            //         const hls = new Hls();
            //         hls.loadSource(video.src);
            //         hls.attachMedia(video);
            //     },
            // }
        }
    });

    // 添加事件
    dp.on('pause', function () {

    });
}


onMounted(() => {
    dplayerInit(props.MyUrl)
})

</script>

<style scoped>

.dplayerOut{
    height: 500px;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    width: 100%;
    height: calc(100vh - 180px);
}
.video-box {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}
.btnGroup{
    display: block;
}

:deep(.dplayer-menu,
    .dplayer-mask) {
    display: none !important;
}
</style>
